<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="jquery.js"></script>
        <script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js"></script>
        <script src="ajax.js"></script>
        <link rel="stylesheet" type="text/css" href="scrollable-horizontal.css"/>
        <link rel="stylesheet" type="text/css" href="scrollable-buttons.css"/>
        <script type="text/javascript">
            function getUrlVars()
            {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for(var i = 0; i < hashes.length; i++)
                {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }
            var type = getUrlVars()['type'];
            var material = getUrlVars()['material'];
            var url = "http://localhost:8080/wobblyduckling/pictureGenerator?type=" + type + "&material=" + material; 
            
            function showPics() {
                ajax(url, false, function(){});
            }
            $(document).ready(function(){
                $(".scrollable").scrollable();
                
                $(".items img").click(function() {
                    if($(this).hasClass("active")) { return; }
                    var url = $(this).attr("src");
                    var wrap = $("#image_wrap").fadeTo("medium", 0.5);
                    var img = new Image();
                    
                    img.onload = function() {
                        wrap.fadeTo("fast", 1);
                        wrap.find("img").attr("src", url);
                    };
                    img.src = url;
                    $(".items img").removeClass("active");
                    $(this).addClass("active");
                }).filter(":first").click();
            })
        </script>
    </head>
    <body>
        <div id="image_wrap">
            <img width="500" height="375"/>
        </div>
        <a class="prev browse left"></a>
        <script type="text/javascript">
            showPics();
        </script>
        <a class="next browse right"></a>
    </body>
</html>
